<div id="activitiesAlarms" style="height:100%">
    <div class="ui-layout-west">
        <div class="clearfix tbl activitiesAlarmsTable" id="activitiesAlarmsTable"></div>
    </div>
    <div class="ui-layout-center">
        <div class="clearfix tbl activitiesAlarmsDurationTable" id="activitiesAlarmsDurationTable"></div>
    </div>
    <div id="timeFilter_holder" class="clearfix ui-layout-south"></div> 
</div>

<script>
    var activitiesAlarmsFX = function() {
        var _self = this;
        _self.perform = function() {
            //dodavanje layout-a za parent div
            $("#activitiesAlarms").layout({
                resizable: false,
                closable: false,
                west__size: "920",
                south__size: "120"
            });
            $("#timeFilter_holder").load("_parts/TimeFilter.html?x="+Math.random(), function() {
                $('.datepicker.hook_dateFrom').datepicker({
                    defaultDate: '-3m',
                    dateFormat: 'd.m.yy'
                }).datepicker('setDate', '-3m');
                $('.datepicker.hook_dateTo').datepicker({
                    defaultDate: new Date(),
                    dateFormat: 'd.m.yy'
                }).datepicker('setDate', new Date());

                $(".timeFilter #row1 .col5").remove();
                $(".timeFilter #row2 .col5").remove();
                $(".timeFilter #row3 .col5").remove();
                $(".timeFilter #row4 .col4").remove();

                _self.loadYearsForTimeFilter();
            });
            $("#activitiesAlarmsTable").addScroll();
            $("#activitiesAlarmsDurationTable").addScroll();
            _self.loadDataForActivitiesAlarms();

            window.refreshAndSortTable = _self.refreshSortedTable;
        };
        _self.refreshSortedTable = function(table, columnName, ascDesc, callback){
            _self.table = table;

            if(table == "activitiesAlarmsTable")
                _self.request = 430;
            else if(table == "activitiesAlarmsDurationTable")
                _self.request = 431;

            _self.columnName = columnName;
            _self.sortItem = "";
            _self.ascDesc = ascDesc;
            _self.action = "getItems";

            _self.random = Math.random();
            _self.url = "js/tableParams/" + _self.request + ".json?x=" + random;

            $.get(_self.url, function(response) {
                $(response.desc).each(function(index,value){
                    if(value.title == columnName){
                        _self.sortItem = value.param;
                        return false;
                    }
                });

                var params = {
                    request: _self.request,
                    action: _self.action,
                    sortItem: _self.sortItem,
                    ascDesc: _self.ascDesc,
                    pStart: ""+_self.startTime,
                    pEnd: ""+_self.endTime,
                    group: ""+_self.group,
                    tag: ""+_self.tag
                };

                window.tableConstructor.generateTable(params, callback);
            });

        };

        _self.loadYearsForTimeFilter = function(callback) {
            $.getJSON(window.CONSTANTS.SERVICE_URL, {
                request: 430,
                action: 'getYears'
            },
            function(response) {
                $.each(response, function(index, value) {
                    $(".timeFilter .hook_mYear").append("<option>" + value.availableYear + "</option>");
                    $(".timeFilter .hook_yYear").append("<option>" + value.availableYear + "</option>");
                });
                if (callback) {
                    callback();
                }
            });
        };
        _self.refresh = function() {
            $("body").css('cursor', 'wait');
            _self.loadDataForActivitiesAlarms(function() {
                $("body").css('cursor', 'default');
            });
        };
        _self.assignEventHandlers = function() {
            $(document).on("click", ".timeFilter button.refresh", function() {
                _self.refresh();
            });
            $(document).on("click", ".ui-layout-west .scrollable .row.data", function() {
            	
                $(".ui-layout-west .scrollable .row.data").removeClass("selected");
                $(this).addClass("selected");

                _self.startTime	    =  $($(this).find("div")[0]).html();
                _self.endTime		=  $($(this).find("div")[1]).html();
                _self.group		    =  $($(this).find("div")[2]).html();
                _self.tag			=  $($(this).find("div")[3]).html();

                _self.loadDataForActivitiesAlarmsDurations(_self.startTime, _self.endTime, _self.group, _self.tag);

            });
        };
        _self.clearEventHandlers = function() {
            $(document).off("click", ".timeFilter button.refresh");
            $(document).off("click", ".ui-layout-west .scrollable .row.data");
        };
        _self.loadDataForActivitiesAlarms = function(callback) {
            var params = {
                request: 430,
                action: 'getItems'
            };
            window.tableConstructor.generateTable(params, callback);
        };
        _self.loadDataForActivitiesAlarmsDurations = function(startTime, endTime, group, tag, callback) {
	        var params = {
	            request: 431,
	            action: 'getItems',
	            pStart: ""+startTime,
	            pEnd: ""+endTime,
	            group: ""+group,
	            tag: ""+tag

	        };
	        window.tableConstructor.generateTable(params, callback);
        };
    };
    if(!window.aAlarmsFX){
        window.aAlarmsFX = new activitiesAlarmsFX();
        window.aAlarmsFX.perform();
        window.aAlarmsFX.clearEventHandlers();
        window.aAlarmsFX.assignEventHandlers();
    }
    else{
        window.aAlarmsFX.perform();
        window.aAlarmsFX.clearEventHandlers();
        window.aAlarmsFX.assignEventHandlers();
    }
</script>